<template>
  <div class="dashboard-container">
    <div class="dashboard-text">主页</div>
    <div style="font-size: 24px">
      <span style="margin-left: 50%">当月收入为：{{ this.revenue }} 元</span>
      <el-date-picker
        v-model="months"
        type="month"
        value-format="yyyy-MM"
        placeholder="选择月" style="margin-left: 40px"/>
      <el-button type="primary" style="margin-left: 40px" @click="updateMonth">查询</el-button>
      <el-button @click="selectMonth" style="margin-left: 40px">重置</el-button>
    </div>
    <div style="margin-top: 50px">
      <div style="margin-left: 10px;float: left">
        <p style="margin-left: 250px;font-size: 32px">酒店入住率</p>
        <PieChart :data="this.pieData" style="margin-left: 150px"/>
      </div>
      <div style="margin-left: 50px;float: left">
        <p style="margin-left: 350px;font-size: 32px">半年内收入</p>
        <BarChart :data="this.barData" style="margin-left: 150px"/>
      </div>
    </div>
  </div>

</template>

<script>
import { mapGetters } from 'vuex'
import PieChart from '@/components/PieChart.vue'
import BarChart from '@/components/BarChart.vue'
import {selectLiveNumber, selectRevenue, selectRevenueByMonth, selectRoomNumber} from "@/api/dashboard";

export default {
  name: 'Dashboard',
  components: { PieChart, BarChart },
  computed: {
    ...mapGetters([
      'userId',
      'userName',
      'roleName'
    ])
  },
  data(){
    return{
      months:'',
      roomNumber:'',
      liveNumber:'',
      revenue:'',
      revenueByMonth:'',
      pieData:[],
      barData:[]
    }
  },
  mounted(){
    this.createPieChart()
    this.selectMonth()
  },
  methods:{
    async createPieChart(){
      await this.selectRoomNumber()
      await this.selectLiveNumber()
      this.pieData = [
        {label:'入住数量',value:this.liveNumber,color:"#b1d5e4"},
        {label:'剩余数量',value:this.roomNumber - this.liveNumber,color:"#bde4d6"}
      ]
    },
    async selectRoomNumber(){
      await selectRoomNumber({}).then(
        response => {
          this.roomNumber = response.data
          console.log('房间数量：' + this.roomNumber)
        }
      )
    },
    async selectLiveNumber(){
      await selectLiveNumber({}).then(
        response => {
          this.liveNumber = response.data
          console.log('入住数量：' + this.liveNumber)
        }
      )
    },
    selectMonth() {
      let data = new Date()
      let year = data.getFullYear()
      let month = data.getMonth() + 1
      if (month < 10) {
        this.months = year + '-0' + month
      } else {
        this.months = year + '-' + month
      }
      this.selectRevenue()
      this.selectRevenueByMonth()
    },
    updateMonth(){
      this.selectRevenue()
      this.selectRevenueByMonth()
    },

    selectRevenue(){
      selectRevenue({month:this.months}).then(
        response => {
          this.revenue = response.data
          console.log('当月收入：' + this.revenue)
        }
      )
    },
    selectRevenueByMonth(){
      selectRevenueByMonth({month:this.months}).then(
        response => {
          this.revenueByMonth = response.data
          this.barData = [
            {label:response.data[5].month,value:response.data[5].money,color:"#b9d7f6"},
            {label:response.data[4].month,value:response.data[4].money,color:"#abecc5"},
            {label:response.data[3].month,value:response.data[3].money,color:"#b7ecab"},
            {label:response.data[2].month,value:response.data[2].money,color:"#d2ecab"},
            {label:response.data[1].month,value:response.data[1].money,color:"#ece7ab"},
            {label:response.data[0].month,value:response.data[0].money,color:"#ecbaab"}
          ]
          console.log('房间数量：' )
          console.log( this.revenueByMonth)
        }
      )
    },
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
